<template>
  <div class="top">
    <div class="topcenter" @click="getechart('quantity')">进出口数量对比</div>
    <div class="topcenter" @click="getechart('amount')">进出口经济对比</div>
  </div>
  <div class="centershow" ref="chartRef"></div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
const comelist = ref([]);
const outlist = ref([]);

const duibi = async () => {
  const comeres = await axios.get(
    `http://127.0.0.1:5000/api/data/carcomedetialyearcount`
  );
  const outres = await axios.get(
    `http://127.0.0.1:5000/api/data/caroutdetialyearcount`
  );
  if (!comeres.data || !outres.data) {
    console.error("API 返回的数据为空");
    return;
  }
  comelist.value = comeres.data.filter(
    (item) =>
      item["carcomedetialyearcount.total_geting_quantity"] !== null &&
      item["carcomedetialyearcount.total_getrmb_amount"] !== null
  );
  outlist.value = outres.data.filter(
    (item) =>
      item["caroutdetialyearcount.total_selling_quantity"] !== null &&
      item["caroutdetialyearcount.total_sellrmb_amount"] !== null
  );

  comelist.value = comelist.value.map((item) => ({
    year: item["carcomedetialyearcount.year"],
    totalGetingQuantity: item["carcomedetialyearcount.total_geting_quantity"],
    totalGetrmbAmount: item["carcomedetialyearcount.total_getrmb_amount"],
  }));
  outlist.value = outlist.value.map((item) => ({
    year: item["caroutdetialyearcount.year"],
    totalSellingQuantity: item["caroutdetialyearcount.total_selling_quantity"],
    totalSellrmbAmount: item["caroutdetialyearcount.total_sellrmb_amount"],
  }));
  console.log(comelist.value);
  console.log(outlist.value);
  initChart("quantity"); // 默认显示数量对比
};

const initChart = (type) => {
  const chart = echarts.init(chartRef.value);
  const years = comelist.value.map((item) => item.year);
  let seriesData = [];

  if (type === "quantity") {
    seriesData = [
      {
        name: "进口数量",
        type: "line",
        data: comelist.value.map((item) => item.totalGetingQuantity),
      },
      {
        name: "出口数量",
        type: "line",
        data: outlist.value.map((item) => item.totalSellingQuantity),
      },
    ];
  } else if (type === "amount") {
    seriesData = [
      {
        name: "进口金额",
        type: "line",
        data: comelist.value.map((item) => item.totalGetrmbAmount),
      },
      {
        name: "出口金额",
        type: "line",
        data: outlist.value.map((item) => item.totalSellrmbAmount),
      },
    ];
  }

  const option = {
    title: {
      text: type === "quantity" ? "进出口数量对比" : "进出口经济对比",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: seriesData.map((series) => series.name),
    },
    xAxis: {
      type: "category",
      data: years,
    },
    yAxis: {
      type: "value",
    },
    series: seriesData,
  };

  chart.setOption(option);
};

const getechart = (type) => {
  initChart(type);
};

onMounted(() => {
  duibi();
});
</script>

<style>
.top {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.topcenter {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.centershow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60%;
  border: 1px solid #ccc;
}
</style>
